<template>
  <div class="min-h-[922px] flex flex-col" v-loading="isLoading">
    <div>
      <el-descriptions ref="ruleFormRef" :column="4" direction="vertical" v-loading="isLoading">
        <el-descriptions-item width="25%" label="产品类型">
          {{ isNullOrEmpty( deviceinfo?.productName ) }}
        </el-descriptions-item>
        <el-descriptions-item width="25%" label="设备别名">
          {{ isNullOrEmpty( newFormInline?.deviceName ) }}
        </el-descriptions-item>
        <el-descriptions-item width="25%" label="设备序列号">
          {{ isNullOrEmpty( newFormInline?.deviceSN ) }}
        </el-descriptions-item>
        <el-descriptions-item width="25%" label="设备状态">
          <el-tag :type="newFormInline?.commStatus == 1? 'success' : 'danger'">
            {{ isNullOrEmpty( DEVICESTATUSTABLE[newFormInline?.commStatus]?.label ) }}
        </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="flex-1 relative flex flex-col" >
      <div class="border-b-[1px] h-[34px] border-[#ECEDF0] dark:border-[#3C4054] mb-[16px] flex boderRight">
        <div v-for="(item, index) in paneLists" :key="index"
          class="border-[1px] mr-[4px] text-[14px] px-[16px] roundeds h-[34px] flex items-center justify-center cursor-pointer transition-all duration-300"
          :class="activeName == item.name
    ? 'text-[#fff]  bg-[var(--el-color-primary)] border-[var(--el-color-primary)] h-[33px]'
    : 'border-[#ECEDF0] text-[#666666] dark:text-[#9794A2] dark:border-[#3C4054]'
    " @click="change(item)">
          {{ isNullOrEmpty( item.label ) }}
        </div>
      </div>
      <component class="flex-1" v-if="!isLoading" :is="activeComp" :deviceinfo="deviceinfo" :deviceId="newFormInline.id"  />
    </div>
  </div>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from "@/utils/functions"
import { getDeviceInfo } from "@/api/operate/device-management";
import { ref } from "vue";
import realsTimedata from "./components/reals-timedata.vue";
import basicInformation from "./components/basic-information.vue";
import equipmentLocation from "./components/equipment-location.vue";
import linkedVideo from "./components/linked-video.vue";
import linkedControl from "./components/linked-control.vue";
import dataRecord from "./components/data-record.vue";
import alarmRecord from "./components/alarm-record.vue";
import faultRecord from "./components/fault-record.vue";
import offlineRecord from "./components/offline-record.vue";
import controlrecords from "./components/control-records.vue";
const centerDialogVisible = ref(false);
import {
  DEVICESTATUSTABLE,
} from "@/constant/device-mangenment";
import { ElMessage } from "element-plus";
type FormProps = {
  newFormInline: any;
  isLoading: boolean;
  id: number
};

const props = withDefaults(defineProps<FormProps>(), {
  newFormInline: () => ({}) as any,
  isLoading: true,
  id: 0
});

const deviceinfo = ref({
  deviceName: "",
  productId: "",
  prodcutName: "",
  deviceSN: "",
  connectStatus: "",
  systemId: "",
  systemName: "",
  status: "",
  commandInfo: [],
  structInfo: [],
  remark: "",
  productName: '',
  rate: ""
});
const activeName = ref("1");
const activeComp = ref(realsTimedata);

const paneLists = {
  1: { name: "1", label: "实时数据", com: realsTimedata },
  2: { name: "2", label: "基本信息", com: basicInformation },
  3: { name: "3", label: "设备位置", com: equipmentLocation },
  4: { name: "4", label: "关联视频", com: linkedVideo },
  5: { name: "5", label: "联动控制", com: linkedControl },
  6: { name: "6", label: "数据记录", com: dataRecord },
  10: { name: "10", label: "控制记录", com: controlrecords },
  7: { name: "7", label: "报警记录", com: alarmRecord },
  8: { name: "8", label: "故障记录", com: faultRecord },
  9: { name: "9", label: "离线记录", com: offlineRecord },
};
const handleClick = (tab: any, event: any) => {
  // console.log(tab, event);
};

const change = (item: any) => {
  activeName.value = item.name;
  activeComp.value = item.com;
};
onMounted(() => {
  getDeviceInfo({ id: props.id }).then(res => {
    if (res.code == 200) {
      deviceinfo.value = res.result;
    } else {
      ElMessage.error(res.message);
    }
  });
})
</script>
<style scoped lang="scss">
.roundeds {
  border-radius: 4px 4px 0 0;
}

.boderRight:nth-child(1) {
  border-left: 1px solid #ecedf0;
  border-top-left-radius: 4px;
}

.dark {
  .boderRight:nth-child(1) {
    border-left: 1px solid #3c4054;
    border-top-left-radius: 4px;
  }
}
</style>
